<template>
    <div id="main">
        <h3>我的留言 (<span>{{ messages.length }}</span>)</h3>
        <hr>
        <ul v-if="messages.length">
            <li v-for="(message, index) in messages" > <router-link :to="{ name: 'user', params: { id: message.get('from').id } }">{{ message.get('from').get('username') }}</router-link> 给你发了一条留言：
                <!--<p><button @click="destroy(index)">删除</button></p>-->
                <p>{{ message.get('message') }}</p>
            </li>
        </ul>
        <span v-else>没有留言</span>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';

    export default {

        name: 'myMessage',

        data () {
            return {
                messages: [],
            }
        },
        created(){
            this.getMessages();
        },
        methods: {
            getMessages(){
                const q = new this.$api.SDK.Query('_Status');
                q.include('from');
                q.equalTo('to', this.$store.state.user)
                q.equalTo('inboxType', 'private');
                q.find().then((messages) => {
                    this.messages = messages;
                }).catch((err) => {
                    Toast({
                        message:err,
                        iconClass:'icon icon-success'
                    })
                })

                //.catch(this.$message.error)
            },
//            destroy(index){
//                console.log(index)
//                this.messages[index].destroy().then((status) => {
//                    if (status) {
//                        this.messages.splice(index, 1);
//                        Toast({
//                            message:'删除成功',
//                            iconClass:'icon icon-success'
//                        })
//                    }
//                })
//            }

        }
    };
</script>

<style lang="css" scoped>
    #main h3 {
        margin-left: 10px;
    }

    #main h3 span{
        color: #41b883;
    }

    #main hr {
        width: 95%;
        margin: 5px auto;
    }

    #main ul{
        margin-top: 10px;
        margin-left: 10px;
        font-size: 16px;
    }
</style>